<!-- 首页下的搜索 -->
<template>
    <div class="big-box">
        <div class="header">
            <div class="header-one">
                <van-search style="width: 6rem" v-model="value1" placeholder="搜索医生、医院或疾病症状" />
                <van-button class="btn" @click="onSearch">搜索</van-button>
            </div>
        </div>
        <div class="box">
            <div class="box-one">
                <div class="box-two">
                    <span style="font-size: 0.25rem"><b>搜索记录</b></span>
                    <span><van-icon size="0.35rem" color="#999999" name="delete-o" @click="clearAllRecords" /></span>
                </div>
                <ul class="box-three">
                    <li v-for="(record, index) in searchRecords" :key="index" style="margin-bottom: 0.2rem;">
                        <span @click="searchAgain(record)">{{ record }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    {{ searchRecords }}
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { showConfirmDialog } from 'vant';
import {useRouter} from 'vue-router'
const router = useRouter()

// 输入框的值
const value1 = ref('');

// 存储搜索记录的列表
let storedData = localStorage.getItem('title');
if (storedData === null) {
    storedData = '[]'; // 设置默认值为一个空数组的JSON字符串形式
}
const searchRecords = ref(JSON.parse(storedData));

// 当用户点击搜索按钮时的处理函数
const onSearch = () => {
    if (value1.value && !searchRecords.value.includes(value1.value)) {
        searchRecords.value.push(value1.value);
        localStorage.setItem('title',JSON.stringify(searchRecords.value))
    }
    
    
    console.log('执行搜索操作，关键词：', value1.value);
     router.push({
        name: 'HomehomesearchPage',
        params: {
            title: value1.value
        }
    });
    // 清空输入框的值
    value1.value = '';
};

// 当用户点击搜索记录再次进行搜索的函数
const searchAgain = (record: any) => {
    value1.value = record;
    onSearch();
};

// 当用户点击搜索记录再次进行搜索的函数
const clearAllRecords = () => {
    showConfirmDialog({
        message:
            '清楚全部查询记录？',
    })
        .then(() => {
            // on confirm
            console.log('确定清空')
            localStorage.removeItem('title')
            searchRecords.value = [];
        })
        .catch(() => {
            // on cancel
            console.log('取消清空')
        });

    
};

</script>
<style scoped>
* {
    font-size: 0.3rem;
}

.big-box {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
}

.header {
    width: 100%;
    height: 1rem;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    .header-one {
        width: 95%;
        display: flex;
        align-items: center;
        margin-left: -0.2rem;
    }
}

.btn {
    width: 100%;
    height: 0.6rem;
    font-size: 0.25rem;
    border: none;
    border-left: 1px solid #e5e5e5;
    background: #f7f8fa;
    color: #1e6fff;
}

.box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.3rem 0 0 0
}

.box-one {
    width: 92%;
}

.box-two {
    height: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-three {
    list-style-type: none;
    padding: 0;

    li {
        margin-right: 0.2rem;
        height: 0.5rem;
        background: #fff;
        border-radius: 0.1rem;
        padding: 0 0.2rem 0 0.2rem;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
            font-size: 0.25rem;
        }
    }
}
</style>